<template>
	<div class="mt-1 relative">
		<match-live-stat
			v-if="showLive"
			class="mb-1 bg-bg-3 rounded-t"
			:home-icon="data.homeTeamIcon"
			:home-team-name="data.homeTeamName"
			:home-score="(scores || data).homeScore"
			:home-red-cards="(scores || data).homeRedCards"
			:home-yellow-cards="(scores || data).homeYellowCards"
			:home-corners="(scores || data).homeCorners"
			:away-icon="data.awayTeamIcon"
			:away-team-name="data.awayTeamName"
			:away-score="(scores || data).awayScore"
			:away-red-cards="(scores || data).awayRedCards"
			:away-yellow-cards="(scores || data).awayYellowCards"
			:away-corners="(scores || data).awayCorners" />
		<div
			class="flex items-center px-1 py-2 bg-bg-3 relative"
			:class="showLive ? 'rounded-b' : 'rounded'">
			<base-image v-if="isSeason" src="sports/league-default.svg" class="w-9"></base-image>
			<match-team-logo
				v-else-if="isCombo"
				:home="data.homeTeamIcon"
				:away="data.awayTeamIcon"></match-team-logo>
			<base-image v-else src="sports/betting.svg" class="w-9"></base-image>
			<div class="ml-2 flex-1 w-1">
				<div class="text-t-1 leading-[17px] app-font-bold w-[80%]">
					<betting-name
						:betslipLine="betslipLine"
						:points="points"
						:side="data.side"
						:trend="betslipLineTrend"
						:id="data.id"
						inline></betting-name>
					<match-scores
						v-if="
							!isSeason &&
							isLiveBet &&
							(data.sportId === SportsType.football || data.sportId === SportsType.fifa24)
						"
						class="ml-1"
						:homeScore="data.betHomeScore"
						:awayScore="data.betAwayScore" />
				</div>
				<div class="text-sm text-t-2">
					<template v-if="!isSeason">
						<div>{{ data.marketTypeName }}</div>
						<div>
							<match-team-name
								v-if="isCombo"
								:home="data.homeTeamName"
								:away="data.awayTeamName"
								class="inline" />
							<match-scores
								v-if="data.outcome && isCombo"
								isResult
								:homeScore="data.homeScore"
								:awayScore="data.awayScore" />
						</div>
					</template>
					<template v-else>
						<match-name
							:event-name="data.eventName"
							:filter-league-name="data.leagueName"></match-name>
					</template>
					<match-league
						v-if="isSeason || isCombo"
						:league-id="data.leagueId"
						:leagueName="data.leagueName" />
				</div>
			</div>
			<div class="absolute right-1 top-3 flex flex-col items-end">
				<betting-odds
					:value="odds"
					:result="data.outcome"
					:class="{ 'text-primary': !isCombo }"
					at />
				<betting-outcome class="mt-[2px]" :outcome="data.outcome" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage } from '@/components/base'
import { BettingName, BettingOdds, BettingOutcome } from '../../betting'
import {
	MatchScores,
	MatchName,
	MatchLeague,
	MatchTeamName,
	MatchTeamLogo,
	MatchLiveStat
} from '../../match'
import { PropType, computed } from 'vue'
import { BettingSelection, Match, Market, Selection } from '@/types'
import { SportsType, MatchType } from '@/enums'

const props = defineProps({
	data: {
		type: Object as PropType<BettingSelection>,
		required: true
	},
	matchData: {
		type: Object as PropType<Match | null>
	},
	marketData: {
		type: Object as PropType<Market | null>
	},
	selectionData: {
		type: Object as PropType<Selection | null>
	},
	isLive: {
		type: Boolean,
		default: false
	},
	isLiveBet: {
		type: Boolean,
		default: false
	},
	isNew: {
		type: Boolean,
		default: false
	},
	isCombo: {
		type: Boolean,
		default: false
	}
})

const isSeason = computed(() => props.data.eventType === MatchType.outright)

const showLive = computed(() => !props.isCombo && props.isLive)

const scores = computed(() => props.matchData?.scores)

const betslipLine = computed(() =>
	props.isNew
		? props.data.betslipLine || props.data.betBetslipLine
		: props.data.betBetslipLine || props.data.betslipLine
)

const betslipLineTrend = computed(() => {
	if (props.isNew && points.value) {
		if (+points.value > +props.data.betPoints) {
			return 'up'
		} else if (+points.value < +props.data.betPoints) {
			return 'down'
		}
	}
	return ''
})

const points = computed(() => {
	if (props.isNew) {
		return props.selectionData ? props.selectionData.points : props.data.points
	}
	return props.data.betPoints
})

const odds = computed(() => {
	if (props.isNew) {
		return props.selectionData ? props.selectionData.displayOdds : props.data.displayOdds
	}
	return props.data.betDisplayOdds
})
</script>
